import { UiButton } from "@/shared/Uikit";
import { UiTextField } from "@/shared/Uikit/UiTextField";
import { useLoginForm } from "../model/useLoginForm";
import { Button } from "@nextui-org/react";
import { FaPlane } from "react-icons/fa";


export function LoginForm() {
    const { handleSubmit, register, errorMessage } = useLoginForm()
    return (
        <div className='rounded-xl font-mono overflow-hidden h-72'>
            <div className='h-10 w-full p-4 bg-blue-500 flex justify-between items-center'>
                <h2 className='text-white font-semibold text-xl'>
                    Авторизация
                </h2>
            </div>
            <div className='bg-white h-[14.25rem] w-full flex'>
                <div className='px-4 py-3'>
                    <form onSubmit={handleSubmit} className='gap-3 flex flex-col'>
                        <div className='flex flex-col items-start'>
                            <label className='text-sm font-mono'>Email / Эл.почта</label>
                            <input
                                type="text"
                                className='bg-blue-300 px-1'
                                {...register('email', { required: true })}
                            />
                        </div>
                        <div className='flex flex-col items-start'>
                            <label className='text-sm font-mono'> Password / Пароль</label>
                            <input
                                type="password"
                                className='bg-blue-300 px-1'
                                {...register('password', { required: true })}
                            />
                        </div>
                        <div className=' items-end'>
                            <p className='text-gray-400 text-xs'>
                                Удачного полёта!
                            </p>
                            <Button type='submit' color='primary' size='sm' endContent={<FaPlane />}>
                                Войти
                            </Button>
                        </div>
                    </form>
                    <div className='h-10 px-2 py-1'>
                        <img
                            alt='barcode'
                            src='/barcode.jpg'
                            className='w-full h-full'
                        />
                    </div>
                </div>
            </div>

            <div className='h-5 bg-blue-500' />
        </div>
    );
}